<template>
  <!-- 增值服务费用编辑 -->
  <el-dialog title="修改" :visible.sync="openIcreServiceFeeDetailEdit" width="800px" append-to-body :destroy-on-close="true" :before-close="beforeClose">
    <el-form ref="formParams" :model="formParams" :rules="rules" label-width="120px" :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="客户条码" prop="sptm">
            <el-input
            v-model="formParams.sptm"
            :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="柜号" prop="spgh">
            <el-input
            v-model="formParams.spgh"
            :disabled="true"
            />
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="仓库条码" prop="sptmc">
            <el-input
            v-model="formParams.sptmc"
            :disabled="true"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="批号" prop="spbh">
            <el-input
            v-model="formParams.spbh"
            :disabled="true"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收费吨数" prop="spsl">
            <el-input
            v-model="formParams.spsl"
            placeholder="请输入收费吨数"
            clearable
            @input="getAmount"
            type="number"
            min="0"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户" prop="allName">
            <el-input
            v-model="formParams.allName"
            :disabled="true"
            />
        </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="发生日期:" prop="rqid">
            <el-date-picker
              value-format="yyyy-MM-dd"
              v-model="formParams.rqid"
              type="date"
              placeholder="请输入发生日期">
            </el-date-picker>
        </el-form-item>
        </el-col>
        <el-col :span="12">
            <el-form-item label="收费项目" prop="xm">
                <el-select
                    v-model="formParams.xm"
                    placeholder="请选择收费项目"
                    clearable
                    :loaidng="increServiceFeeItemLoading"
                >
                    <el-option
                        v-for="item in increServiceFeeItemList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.name"
                    />
                </el-select>
            </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收费单价" prop="bzdj">
            <el-input
              v-model="formParams.bzdj"
              placeholder="请输入收费单价"
              clearable
              style="width:225px"
              @input="getAmount"
          >
            <el-select
                slot="append"
                v-model="formParams.bz"
                placeholder="请选择"
                style="width:80px"
                @input="getAmount"
            >
                <el-option
                    v-for="item in unitType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
            </el-select>
          </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收费金额" prop="spje">
            <el-input
            v-model="formParams.spje"
            placeholder="请输入收费金额"
            clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="备注:" prop="itbz">
            <el-input
            v-model="formParams.itbz"
            placeholder="请输入备注"
            clearable
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleEdit('formParams')">修 改</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { increServiceFeeItemModify, increServiceFeeItem } from "@/api/storage/commonGoods/increServiceFee";
import { WEIGHT_DIGIT, AMOUNT_DIGIT } from '@/utils/constant'

export default {
  name: "increServiceFeeDetailEdit",
  data() {
    return {
      //收费项目加载
      increServiceFeeItemLoading:true,
       // 表单校验
      rules: {
        spzs: [
          { required: true, message: "物品规格不能为空", trigger: "blur" }
        ],
        wpggA: [
          { required: true, message: "物品规格不能为空", trigger: "blur" }
        ],
        spsl: [
          { required: true, message: "收费吨数不能为空", trigger: "blur" },
          { required: true, validator: this.checkspsl, trigger: "blur" }
        ]
      },
      //弹窗状态
      openIcreServiceFeeDetailEdit: false,
      //收费
      unitType: [
        {label:"元/次", value:"元/次"},
        {label:"元/吨", value:"元/吨"}
      ],
      //提交表单
      submitParams: {
        sptm:"",
        spgh:"",
        sptmc:"",
        spbh:"",
        spjs:"",
        allName:"",
        bz: "",
        bzdj: "",
        id: 0,
        itbz: "",
        rqid: "",
        spje: "",
        spsl: "",
        xm: ""
      },
      // 表单参数
      formParams: {},
      increServiceFeeItemList: [],
    };
  },
  watch:{
    'formParams.spsl': function(data) {
      if(data !== undefined) {
        if(data.indexOf('.')>0){
          data=data.slice(0,data.indexOf('.')+ (WEIGHT_DIGIT + 1))
        }
        this.formParams.spsl = data
      }
      
    },
    'formParams.bzdj': function(data) {
      if(data !== undefined) {
         if(data.indexOf('.')>0){
          data=data.slice(0,data.indexOf('.')+ (AMOUNT_DIGIT + 1))
        }
        this.formParams.bzdj = data
      }
    },
    'formParams.spje': function(data) {
      if(data !== undefined) {
        if(data.indexOf('.')>0){
          data=data.slice(0,data.indexOf('.')+ (AMOUNT_DIGIT + 1))
        }
        this.formParams.spje = data
      }
    }
  },
  methods: {
     /**获取收费项目 */
    getIncreServiceFeeItem() {
      this.increServiceFeeItemLoading=true
      increServiceFeeItem({}).then(response => {
        this.increServiceFeeItemList = response.data
        this.increServiceFeeItemLoading=false
      });
    },

    /**修改 */
    handleEdit(formName) {
      this.$refs[formName].validate((valid, data) => {
        if(valid) {
          const submitParams = this.submitParams
          for(let i in submitParams) {
            submitParams[i] = this.formParams[i]
          }
          this.$modal.loading("数据正在修改中，请稍等...")
          increServiceFeeItemModify(this.formParams).then(response => {
            this.$modal.closeLoading()
            this.$modal.msgSuccess('修改成功！')
            this.close()
            this.$emit('refresh', true)
          }).catch(()=> {
            this.$modal.closeLoading()
          })
        } else {
          for(let i in data) {
            const item = data[i]
            for(let j in item) {
              const message = item[j].message
              return this.$modal.msgError(message)
            }
          }
          return false
        }
      })
    },

    /**获取收费金额 */
    getAmount() {
      if(this.formParams.bz == "元/次") {
        this.$set(this.formParams, "spje", this.formParams.bzdj.toFixed(AMOUNT_DIGIT))
      } else if(this.formParams.bz == "元/吨") {
        this.$set(this.formParams, "spje", (this.formParams.spsl*this.formParams.bzdj).toFixed(AMOUNT_DIGIT))
      }
    },
      /**验证收费吨数 */
    checkspsl(rule, value, callback) {
      const spslOld = parseFloat(this.formParams.spslOld)
      if(spslOld < value) {
        callback("收费吨数不可超过库存吨数")
      } else {
        callback()
      }
    },
    /**关闭弹窗 */
    beforeClose(done) {
      this.close()
      done()
    },
    /**关闭窗口 */
    close() {
      this.changeIcreServiceFeeDetailEdit()
      this.reset()
    },
    /**改变窗口状态 */
    changeIcreServiceFeeDetailEdit() {
      this.openIcreServiceFeeDetailEdit = !this.openIcreServiceFeeDetailEdit;
    },
       /** 重置数据 */
    reset() {
      Object.assign(this.$data, this.$options.data())
    },
    /**打开弹窗 */
    open(row) {
      this.changeIcreServiceFeeDetailEdit()
      this.formParams = row
      this.formParams.spslOld = row.spsl  
      this.getAmount()
      this.getIncreServiceFeeItem()
    },
  }
};
</script>
